<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="http://10.35.164.246/allPage/css/details_2.css">
    <link rel="stylesheet" href="http://10.35.164.246/allPage/css/reset.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        img {
            vertical-align: bottom;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        body {
            background-color: #f0f1f1;
            overflow-x: hidden;
            color: #333333;
            box-sizing: border-box;
        }
        
        header {
            height: 48px;
            background-color: #323232;
        }
        
        header .head {
            width: 1103px;
            height: 48px;
            margin: 0 auto;
        }
        
        header .head .logo {
            display: inline-block;
            width: 184px;
            height: 102px;
            background: url(../img/logo_02.jpg) no-repeat;
            position: absolute;
        }
        
        header .head .list {
            width: 526px;
            height: 48px;
            float: left;
            margin-left: 218px;
        }
        
        header .head .list li {
            width: 88px;
            height: 48px;
            line-height: 48px;
            text-align: center;
            float: left;
            font-size: 13px;
        }
        
        header .head .list li a {
            display: inline-block;
            width: 88px;
            height: 48px;
            color: #a6a6a6;
        }
        
        .head .list li a:hover {
            background-color: #dd4012;
            color: #fff;
        }
        
        .head .list .active a {
            background-color: #dd4012;
            color: #fff;
        }
        
        header .head .photo {
            width: 274px;
            height: 37px;
            float: right;
            margin-top: 6px;
        }
        
        header .head .photo li {
            box-sizing: border-box;
            height: 37px;
            float: left;
            padding-top: 8px;
            margin-right: 16px;
        }
        
        header .head .photo .first {
            padding-top: 12px;
            font-size: 10px;
            background: url(../img/iphon_03.png) no-repeat 0 center;
            color: #666666;
            padding-left: 25px;
            margin-right: 22px;
        }
        
        .switch {
            width: 1103px;
            height: 127px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        .switch .tabSwtich {
            width: 244px;
            height: 36px;
            line-height: 36px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            margin-top: 46px;
        }
        
        .switch .tabSwtich li {
            width: 36px;
            height: 36px;
            text-align: center;
            background-color: #fff;
            font-size: 10px;
        }
        
        .switch ul li a {
            display: inline-block;
            width: 36px;
            height: 36px;
            color: #a9a9a9;
        }
        
        .tabSwtich .focus {
            background-color: #dd4012;
            color: #fff;
        }
        
        .tabSwtich a:hover {
            background-color: #dd4012;
            color: #fff;
        }
        
        main {
            box-sizing: border-box;
            width: 1103px;
            height: 1084px;
            margin: 0 auto;
            background-color: #fff;
            margin-top: 106px;
            margin-bottom: 41px;
            overflow: hidden;
            padding-left: 51px;
            padding-right: 57px;
        }
        
        main h5 {
            font-size: 18px;
            margin-top: 40px;
            color: #dd4012;
        }
        
        main .tag {
            width: 991px;
            margin-top: 16px;
            font-size: 12px;
        }
        
        main .tag span {
            margin-left: 18px;
            color: #a9a9a9;
        }
        
        main .tag b {
            display: block;
            color: #a9a9a9;
            float: right;
        }
        
        main .line {
            display: block;
            width: 991px;
            height: 1px;
            background-color: #e3e3e3;
            margin-top: 6px;
        }
        
        main .textarea {
            width: 991px;
        }
        
        .textarea img {
            width: 991px;
            height: 302px;
            margin-top: 31px;
        }
        
        .textarea p {
            font-size: 14px;
            line-height: 30px;
            margin-top: 28px;
        }
        
        .textarea p :last-child {
            margin-bottom: 42px;
        }
        
        .bottom {
            margin-top: 15px;
        }
        
        .bottom p {
            font-size: 14px;
        }
        
        .bottom .left {
            float: left;
        }
        
        .bottom .right {
            float: right;
        }
        
        .bottom p span:first-child {
            color: #b6b6b6;
        }
        
        footer {
            height: 82px;
            background-color: #323232;
        }
        
        footer .content {
            width: 1103px;
            height: 82px;
            margin: 0 auto;
        }
        
        footer .content .left {
            width: 165px;
            height: 82px;
            float: left;
            margin-top: 22px;
        }
        
        footer .content .right {
            width: 612px;
            height: 82px;
            float: right;
        }
        
        .content .right ul {
            width: 380px;
            height: 16px;
            margin-top: 26px;
            display: flex;
            justify-content: space-between;
            margin-left: 230px;
            margin-bottom: 8px;
        }
        
        .content .right ul li {
            height: 16px;
            font-size: 13px;
        }
        
        .right ul li a {
            color: #999999;
        }
        
        .content .right p {
            font-size: 12px;
            color: #666666;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <header>
        <div class="head">
            <h1 class="logo">
            </h1>
            <ul class="list">
                <li>
                    <a href="http://10.35.164.246/allPage/index.html">网站首页</a>
                </li>
                <li>
                    <a href="">传悦资源</a>
                </li>
                <li>
                    <a href="http://10.35.164.246/allPage/list_1.html">传悦案例</a>
                </li>
                <li class="active">
                    <a href="http://10.35.164.246/allPage/list_2.html">解决方案</a>
                </li>
                <li>
                    <a href="">需求提交</a>
                </li>
            </ul>
            <ul class="photo">
                <li class="first">
                    0535-60652189
                </li>
                <li>
                    <img src="img/love_03.jpg" alt="">
                </li>
                <li>
                    <img src="img/love_05.jpg" alt="">
                </li>
                <li>
                    <img src="img/love_07.jpg" alt="">
                </li>
                <li>
                    <img src="img/love_09.png" alt="">
                </li>
            </ul>
        </div>
    </header>

    <main>
        <h5>
            <!-- 网络活动，社交性植入策略 ——社会化语境下，让消费者说出喜好 -->
        </h5>
        <div class="tag">
            <i></i>
            <!-- 标签： -->
            <span>
               
            </span>
            <!-- 品牌营销  网络推广  网站建设  全网营销 -->
            <b></b>
            <!-- 2013-08-19 -->
        </div>
        <span class="line"></span>
        <div class="textarea">
            <img src="" alt="" class="pho">
            <p class="custom">
                消费者为什么要看这些东西呢？它们提供了消费者什么利益？
            </p>
            <p class="socity">
                社会化语境下，让消费者说出喜好。
            </p>
            <p class="audeio">
                社会化媒体的兴起，包括QQ等聊天工具，娱乐性SNS，人人、校园等人群细分总集，微博，微信，陌陌等，无论是网络平台还是移动网络平台，一系列的媒体提 供了让消费者自说其话的平台，人们在上面发表各种意见，可能针对这个意见，会有更多的声音出来，有赞成、有反对，也许他们站在了不同的角度，代表不同 属性、不同阶段的用户群体。如果是在一个群组中，活跃用户的意见，可能会影响到后来提出意见者的思想，并导致他们盲从。这些庞大的社会语言，带给品牌 营销者大量的、前所未有的、关于消费者的详细数据。作为数字营销人员，我们会从一个网络消费者的行为路径描述出具化的消费形象，并针对这个消费形象制
                定更为合适的营销战略。
            </p>
            <p class="tool">
                社交性媒体无疑是与这个具化的、消费形象说话的最好路径。
            </p>
            <p class="know">
                如以下的案例，具化的消费形象能让我们知道，他是个移动的年轻用户，对新的优惠活动有积极兴趣。
            </p>
            <p class="use">
                贵州电信的合作，利用的就是移动社交平台，针对贵州地区的APP社交游戏，生活应用进行植入投放。在层层筛选，精准定向到目标受众，推送到受众面前的， 不再是硬绑绑的广告，而是实实在在的优惠资讯。此次投放中，获得了的高点击率，无疑为我们社会化媒体投放策略打上一支强心针，从实践中检验策略的可行 性。深入了解消费者需求，激发消费者参与度，要达到这一点目的，要求的已经远远超越传统的网络投放的思维和方法。通过对于用户接触到的各个接触点的分 析监测，然后进行全局性，系统性的分析，优化数字营销策略，让消费者说出品牌喜好。
            </p>
        </div>
        <span class="line"></span>
        <div class="bottom">
            <p class="left">
                <span class="pre">上一个：</span>
                <span class="detail">开门红商城基础营销</span>
            </p>
            <p class="right">
                <span class="next">下一个：</span>
                <span class="data">金数据全网整合营销</span>
            </p>
        </div>

    </main>

    <footer>
        <div class="content">
            <div class="left">
                <a href="#">
                    <img src="img/logo-dm_03.jpg" />
                </a>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">关于传悦</a></li>
                    <li><a href="#">新闻动态</a></li>
                    <li><a href="#">传悦观点</a></li>
                    <li><a href="#">联系传悦</a></li>
                    <li><a href="#">加入传悦</a></li>
                    <li><a href="#">付费账户</a></li>
                </ul>
                <p>
                    Copyright ©2013 创梦网络科技有限责任公司 ‖ 传悦 Chnyoo.cn All Rights Reserved 京ICP备12005221号
                </p>
            </div>
        </div>
    </footer>

</body>

</html>

<script>
    //对获取参数的操作进行一系列封装
    function $(selector) {
        let result = document.querySelectorAll(selector);
        if (result.length === 1) {
            return result[0];
        } else {
            return result;
        }
    }
    let http = new XMLHttpRequest();

    http.open("get", "http://10.35.164.246:81/detailSolution" + location.search);

    http.send();


    http.onreadystatechange = function() {
        if (http.readyState === 4) {
            //对后端传送的数据进行正解析
            let dataList = JSON.parse(http.responseText);

            //动态生成数据
            dataList.forEach(function(item) {

                $("main").querySelector("main h5").innerHTML = item.h5;

                $("main").querySelector(".tag i").innerHTML = item.i;

                $("main").querySelector(".tag span").innerHTML = item.span;;

                $("main").querySelector(".tag b").innerHTML = item.b;;

                // $("main").id = item.id;

            });

        }
    }
</script>